<template>
  <div class="global-mask">
    <!-- 使用 img 元素替代 background-image 以获得更好的质量 -->
    <img
      src="@/assets/images/mc_bg.jpg"
      alt="background"
      class="background-image"
      @load="onImageLoad"
    />
    <div class="mask-content">
      <!-- <button class="close-btn" @click="$emit('close')">×</button> -->
      <!-- <div class="mask-message">
        <span class="mask-instruction">
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;习近平总书记指出，要实施更多有温度的举措，落实更多暖民心的行<br />
          动，用心用情用力解决好人民群众的急难愁盼问题。
        </span>
        <br /><br />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;牛市口街道利用人工智能提升12345平台流转效率，及时回应群众诉<br />
        求；对反映内容智能分类，督促提升办件质量，以数字技术赋能基层治<br />
        理提质增效，以驻网监督推动作风建设走深走实，不断提升人民群众的<br />
        获得感、幸福感、安全感。
      </div> -->
    </div>
  </div>
</template>

<script setup>
import { onMounted, onBeforeUnmount, getCurrentInstance } from "vue";

const { emit } = getCurrentInstance();

function closeMask() {
  emit("close");
}

function handleAnyEvent(e) {
  closeMask();
}

function onImageLoad() {
  // 图片加载完成后的处理
  console.log("Background image loaded successfully");
}

onMounted(() => {
  window.addEventListener("mousedown", handleAnyEvent);
  window.addEventListener("keydown", handleAnyEvent);
});

onBeforeUnmount(() => {
  window.removeEventListener("mousedown", handleAnyEvent);
  window.removeEventListener("keydown", handleAnyEvent);
});
</script>

<style scoped>
.global-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -1;
  /* 优化图片渲染质量 */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: high-quality;
  /* 防止模糊 */
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
}

/* 移除原来的伪元素样式 */
/* .global-mask::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("@/assets/images/mc_bg.jpg") center center/cover no-repeat;
  z-index: -1;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  background-attachment: fixed;
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
  background-size: 100% 100%;
} */

.mask-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  /* background: rgba(255, 255, 255, 0.2); */
}
.mask-message {
  margin-top: 16vh;
  margin-bottom: 0;
  font-size: 42px;
  font-family: "KaiTi", "KaiTi_GB2312", "Kaiti SC", "STKaiti", "楷体", serif;
  font-weight: normal;
  text-align: center;
  color: #fff;
  text-align: start;
}
.mask-instruction {
  font-weight: bold;
  display: inline-block;
  margin-bottom: 24px;
}
.close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 32px;
  cursor: pointer;
}
</style>
